<template>
    <!-- 关注/粉丝组件 -->
    <view class="container">
        <view class="item">
            <image class="avatar" :src="item.avatarUrl" />
            <text class="name">{{ item.nickname }}</text>
        </view>
        <button class="isFollowing" v-if="buttonList && item.followed" @tap="buttonList[0].func(item)">{{
            buttonList[0].text
            }}</button>
        <button class="notFollowing" v-else-if="buttonList && !item.followed" @tap="buttonList[1].func(item)">{{
            buttonList[1].text
        }}</button>
    </view>
</template>
<script setup lang="ts">
import type { FollowItem, ButtonItem } from '@/type/follow';
const props = defineProps<{
    item: FollowItem; // 这里定义 item 的类型
    buttonList: Array<ButtonItem>
}>();
</script>
<style scoped lang="scss">
.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;
    background-color: #fff;
    border-radius: 10rpx;
    // box-shadow: $shadow;
    border-top: 1rpx solid #ddd;

    .item {
        display: flex;
        align-items: center;

        .avatar {
            height: 80rpx;
            width: 80rpx;
            border-radius: 50%;
            margin-right: 20rpx;
        }

        .name {
            font-size: 32rpx;
        }
    }

    .isFollowing {
        padding: 0;
        margin: 0;
        background-color: $color-main;
        color: #fff;
        height: 60rpx;
        width: 150rpx;
        line-height: 60rpx;
        text-align: center;
        font-size: 30rpx;

    }

    .notFollowing {
        padding: 0;
        margin: 0;
        background-color: #fff;
        color: $color-main;
        border: 2rpx solid $color-main;
        height: 60rpx;
        width: 150rpx;
        line-height: 56rpx;
        text-align: center;
        font-size: 30rpx;
    }
}
</style>
